<template>
	<view class="col-arrange full-width">
		<view style="width:100%">
			<input placeholder="模板关键字" class="theme-input normal-font-size" v-model="title"/>
			<image @click="search" style="height:70upx;width:20%;margin-top:20upx;" src="../../static/search.svg"></image>
		</view>
		<view v-show="noRes" class="center-view"><text style="color:gray">没有找到和"{{resKey}}"相关的模板</text></view>
		<view class="center-view">
			<!-- <view><input v-model="title" placeholder="模板关键字"/><button @click="search" class="input-button">搜索模板</button></view> -->
			<view  @click="view(templet.id)" class="dashboard templet-item" v-for="templet in templets" :key="templet.id">
				<view class="templet-title">{{templet.title}}</view>
				
				<view class="templet-author">作者：{{templet.author}}</view>
				
				<view class="templet-time">{{formatDatetime(new Date(templet.subTime))}}</view>
				
				<view class="templet-invisible">{{templet.status==0?'仅自己可见':'所有人可见'}}</view>
				<!-- <view  @click.stop="useTemplet(templet.id)" class="center-view" style="height:100upx;position:absolute;right:1upx;">
					<image style="height:70upx;width:20%;margin-top:20upx;" src="../../static/use.svg"></image>
					<text>应用</text>
				</view> -->
				
				<button type="primary" class="dashboard-button templet-button" @click.stop="useTemplet(templet.id)">应用</button>
			</view>
		</view>
			
	</view>
</template>


<script>
	import formatDatetime from "../../common/zdateutil.js"
	export default {
		data: function () {
			return {
				title : "",
				templets : [],//[{'id':'test1','title':'test1','author':'zekdot','subTime':1586347105849,'status':0}],
				formatDatetime : null,
				noRes : false,
				resKey : ""
				// timeLimit : ""
			}
		},
		onLoad : function(){
			this.formatDatetime = formatDatetime.formatDatetime;
			// var vm = this;
			// var param = {'lastId':'','length':10};
			// this.$get(this.enrollurl + '/enroll/selfTemplets',param,function(res){
			// 	var data = res.data;
			// 	if(data.code != 0){
			// 		alert(data.message);
			// 		return ;
			// 	}
			// 	vm.templets = data.object;
			// });
		},
		methods: {
			search : function(){
				this.noRes = false;
				var param = {'title':this.title,'lastId':'','length':10};
				var vm = this;
				this.$get(this.enrollurl + '/enroll/searchTemplets',param,function(res){
					var data = res.data;
					if(data.code != 0){
						uni.showModal({
							title : '错误',
							content : data.message,
							showCancel : false
						})
						return;
					}
					vm.templets = data.object;
					if(vm.templets.length == 0 && data.object.length == 0){
						vm.noRes = true;
						vm.resKey = vm.title;
					}
				})
			},
			view : function(id){
				uni.navigateTo({
					url : 'viewTemplet?id=' + id
				})
			},
			useTemplet(id){
				// var content;
				var vm = this;
				var param = {'id':id};
				this.$get(this.enrollurl + '/enroll/getTemplet',param,function(res){
					var data = res.data;
					if(data.code != 0){
						uni.showModal({
							title : '错误',
							content : data.message,
							showCancel : false
						})
						return;
					}
					uni.setStorage({
						key : 'questionStr',
						data : JSON.parse(data.object.content)
					})
					uni.navigateTo({
						url : 'newEnrollItem'
					})
					// console.log(data.object.content);
				})
			}
		}
	}
</script>

<style>
	@import "../../common/zcss.css";
	input{
		margin-top:25upx;
		margin-bottom: 25upx;
		margin-left: 30upx;
		/* background-color: rgba(231, 226, 226, 0.568); */
		
		height:40upx;
		width: 650upx;
		padding: 20upx;
		padding-left: 30upx;
		/* border-radius: 50upx; */
		/* border-bottom: 1upx solid black; */
	}
	/* .enroll-view{
		width: 100%;
		flex-direction: column;
	} */
	/* .center-view{
		width:100%;
		display: flex;
        flex-direction: column;
        justify-content: flex-start;
		align-items: center;
	} */
	/* .new-item-view{
		background-color: aqua;
		margin-bottom: 10upx;
	} */
	.templet-item{
		border: 1upx solid gray;
		height: 150upx;
		position: relative;
		width: 99%;
		
		/* margin-bottom: 10upx; */
	}
	.templet-button{
		position: absolute;
		font-size:35upx; 
		height:80upx;
		width: 160upx;
		margin-top: 5upx;
		right: 1%;
		
		color:black;
	}
	.templet-invisible{
		position: absolute;
		font-size: 20upx;
		color: gray;
		right: 1%;
		bottom: 0%;
	}
	.templet-time{
		position: absolute;
		font-size: 20upx;
		color: gray;
		left: 1%;
		bottom: 0%;
	}
	.templet-author{
		position: absolute;
		font-size: 20upx;
		right: 1%;
		bottom: 30upx;
	}
	.templet-title{
		font-size: 40upx;
		position: absolute;
		left: 1%;
	}
</style>
